<template>
  <!-- 技术成熟度 -->
  <div>
    <div style="width:1000px;height:500px;margin:0 auto" id="jscsd" class="chart"></div>
  </div>
  
</template>

<script>
import {mapState} from 'vuex'
import Ecolors from '@/utils/chartColors'
import {resize, spaceTxt} from '@/utils/utils'
export default {
  name:'JSC',
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
      type: Array
    }
  },
  data() {
    return {
      chart: null,
      graphType: 'bar',
      colors: [],
      xData: [],
      yData: [],
      legendData: [],
    }
  },
  computed: {
    ...mapState(['techAnalysisKeyWords'])
  },
  watch: {},
  mounted() {
    this.chart = this.$echarts.init(document.getElementById('jscsd'))
    this.getData()
  },
  methods: {
    //发起请求
    getData(){
      let query = this.$route.query
      let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      this.colors = [...Ecolors.color]
      this.init(xData);
    },
    init(xData) {
      // 图例
      let legend = {
        type: 'plain',
        show: true,
        left: '4%',
        right: '4%',
        top: 'bottom',
        icon: 'circle',
        textStyle: {
          color: '#6b6c7e'
        },
      }
      let backgroundColor = '#fff'

      let option = {
        tooltip: {
          confine: true,
          show: true,
          trigger: this.graphType === 'pie' ? 'item' : 'axis',
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000"
          },
        },
        // 图例
        legend,
        // 背景色
        backgroundColor,
        xAxis: {
          type: 'value',
          minInterval: 1,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#9e9e9e"
            }
          },
        },
        yAxis: {
          type: 'category',
          boundaryGap: true,
          // 轴线
          axisLabel: {
            rotate: 40,
            interval: 0,
            margin: 10,
            textStyle: {
              color: "#9e9e9e"
            },
            formatter: (label) => {
              return spaceTxt(label, 10)
            }
          },
          data: xData
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Affiliate Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: 'Search Engine',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      if (this.graphType !== 'pie') {
        option.tooltip.trigger = 'axis'
        option.color = this.colors
        option.grid = {
          top: "40px",
          right: "20px",
          left: "20px",
          bottom: '40px',
          containLabel: true
        }
      } else {
        let formatter = (params) => {
          let str = `${params.marker}${params.data.name}：${params.data.value}`
          return str
        }
        option.tooltip.trigger = 'item'
        option.tooltip.formatter = formatter
        option.xAxis.show = false
        option.yAxis.show = false
      }

      this.chart.setOption(option)
      this.$emit('chartDom', this.chart)

      // 点击进行对比分析
      this.chart.off('click')
      this.chart.on('click', params => {
        let dataIndex = params.dataIndex
        let op = this.chart.getOption()
        op.series[0].data.forEach((v, i) => {
          if (i == dataIndex) {
            if (v.custom_selected === true) {
              v.itemStyle.color = v.custom_color
            } else {
              v.itemStyle.color = 'red'
            }
            v.custom_selected = !v.custom_selected
          }
        })
        this.getContrastiveData(op)
        this.chart.setOption(op)
      })

      // 后台报告下载
      this.chart.on('finished', () => {
        let tempId = this.$route.query.tempId
        if (tempId) {
          this.getEchartImg(this.chart.getDataURL())
        }
      })
    },
    // 保存对比分析数据
    getContrastiveData(option) {
      let arr = []
      option.series[0].data.forEach((v, i) => {
        if (v.custom_selected === true) {
          arr.push(v)
        }
      })
      this.$emit('contrastiveData', arr)
    },
    getEchartImg(base) {
      window.echartImg = base
    }
  },

  destroyed() {
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>
// .chart {
//   background-color: #fff;
// }
</style>